<template>
  <div class="layout-container">
    <split-pane split="vertical" :min-percent="26" :default-percent="26" :max-percent="50">
      <template slot="paneL">
        <split-pane split="vertical" :min-percent="40" :default-percent="40" :max-percent="40">
          <template slot="paneL">
            <div class="left-container">
              <el-tree
                ref="tree"
                style="margin-top: 20px"
                class="filter-tree"
                :data="orgOption"
                :props="defaultProps"
                node-key="id"
                default-expand-all
                highlight-current
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <!--可以根据情况，以数据类型来显示不同的图标或图片-->
                  <i v-if="(data.children && data.children.length) || data.parentId === '0'" :class="node.expanded ?'co-icon-zg-folder-opened-fill' : 'co-icon-folder_opened'" />
                  <i v-else class="el-icon-document" />
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </template>
          <template slot="paneR">
            <div class="left-container" style="overflow: auto">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
              />
              <el-tree
                ref="areaTree"
                style="margin-top: 20px"
                class="filter-tree"
                :data="areaOption"
                :props="{
                  children: 'children',
                  label: 'areaName'
                }"
                node-key="id"
                default-expand-all
                highlight-current
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="handleAreaNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <!--可以根据情况，以数据类型来显示不同的图标或图片-->
                  <i v-if="(data.children && data.children.length) || data.parentId === '0'" :class="node.expanded ?'co-icon-zg-folder-opened-fill' : 'co-icon-folder_opened'" />
                  <i v-else class="el-icon-document" />
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </template>
        </split-pane>

      </template>
      <template slot="paneR">
        <div class="right-container">
          <basic-page-vxe
            ref="basePage"
            list-api="findSysWellByCondition"
            del-api="softDeleteSysWellById"
            :search-form="basicData.searchForm"
            :search-handle="basicData.searchHandle"
            :columns="basicData.columns"
            :search-other-data="basicData.searchOtherData"
          />
        </div>
      </template>
    </split-pane>
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="460px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 100%">
        <el-form-item label="生产单位" prop="wellOrgId">
          <el-select v-model="temp.wellOrgId" filterable placeholder="请选择" style="width: 100%" disabled>
            <el-option
              v-for="item in orgOption"
              :key="item.id"
              :label="item.prodOrgName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区块" prop="wellAreaId">
          <el-cascader v-model="temp.wellAreaId" :options="areaOption" :show-all-levels="false" :props="{value: 'id', label: 'areaName', emitPath: false}" style="width: 100%" filterable />
        </el-form-item>
        <el-form-item label="井号" prop="wellCommonName">
          <el-input v-model="temp.wellCommonName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="井号ID(A2)" prop="wellId">
          <el-input v-model="temp.wellId" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSysWell, updateSysWell, addSysWells, findSysProdOrgAll } from '@/api/base'
import { findSysAreaByCondition } from '@/api/getTableList'
import splitPane from 'vue-splitpane'

export default {
  name: '',
  components: {
    splitPane
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '井号', field: 'wellCommonName' }},
          { config: { title: '区块', field: 'wellAreaName' }},
          { config: { title: '井号Id', field: 'wellId' }},
          { config: { title: '创建日期', width: '160', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchForm: [
          { type: 'Input', label: '井号', prop: 'wellCommonName', width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } }
          // { label: '批量新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleDebantchCreate() } }
        ],
        searchOtherData: {
          wellOrgId: '',
          wellAreaId: ''
        }

      },
      roleIdOptions: [],
      orgIdOptions: [],
      temp: {
        id: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        // wellProject: [{ required: true, message: '请输入项目', trigger: ['blur', 'change'] }],
        wellOrgId: [{ required: true, message: '请输入生产单位', trigger: ['blur', 'change'] }],
        wellAreaId: [{ required: true, message: '请输入区块', trigger: ['blur', 'change'] }],
        wellCommonName: [{ required: true, message: '请输入井号', trigger: ['blur', 'change'] }],
        wellId: [{ required: true, message: '请输入井号ID', trigger: ['blur', 'change'] }]
      },
      downloadLoading: false,
      wellArr: [],
      orgOption: [],
      areaOption: [],
      defaultProps: {
        children: 'children',
        label: 'prodOrgName'
      },
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.areaTree.filter(val)
    }
  },
  created() {
    this.getType()
    // const arr = []
    // axios('/xml/wellbc.xml').then((res) => {
    //   const xml = this.$x2js.xml2js(res.data)
    //   const gxData = xml.DataTable.diffgram.DocumentElement.data
    //   console.log(gxData)
    //   axios('/xml/dzdybc.xml').then((res1) => {
    //     const xml = this.$x2js.xml2js(res1.data)
    //     const dydzbcData = xml.DataTable.diffgram.DocumentElement.data
    //     console.log(dydzbcData)
    //     gxData.forEach((item) => {
    //       const obj = {
    //         wellCommonName: item.WELL_COMMON_NAME,
    //         wellId: item.WELL_ID
    //       }
    //       const info = dydzbcData.find((i) => {
    //         return item.SITE_ID === i.SITE_ID
    //       })
    //       if (info) {
    //         obj.areaId = info.GEO_UNIT_ID
    //       }
    //       arr.push(obj)
    //     })
    //     console.log(arr)
    //     findSysAreaAll().then((response) => {
    //       console.log(response.data)
    //       const areaData = response.data
    //       arr.forEach((item) => {
    //         areaData.forEach((i) => {
    //           if (item.areaId === i.areaId) {
    //             const obj = {
    //               wellAreaId: i.id,
    //               wellAreaName: i.areaName,
    //               wellOrgId: i.areaOrgId,
    //               wellOrgName: i.areaOrgName,
    //               wellCommonName: item.wellCommonName,
    //               wellId: item.wellId
    //             }
    //             this.wellArr.push(obj)
    //           }
    //         })
    //       })
    //       console.log(this.wellArr)
    //     })
    //   })
    // })
    // axios('/xml/well.xml').then((res) => {
    //   const xml = this.$x2js.xml2js(res.data)
    //   const gxData = xml.DataTable.diffgram.DocumentElement.data
    //   console.log(gxData)
    //   findSysAreaAll().then((response) => {
    //     console.log(response.data)
    //     const areaData = response.data
    //     gxData.forEach((item) => {
    //       areaData.forEach((i) => {
    //         if (item.STRUCT_ID === i.areaId) {
    //           const obj = {
    //             wellAreaId: i.id,
    //             wellAreaName: i.areaName,
    //             wellOrgId: i.areaOrgId,
    //             wellOrgName: i.areaOrgName,
    //             wellCommonName: item.WELL_COMMON_NAME,
    //             wellId: item.WELL_ID
    //           }
    //           this.wellArr.push(obj)
    //         }
    //       })
    //     })
    //     console.log(this.wellArr)
    //   })
    // })
  },
  mounted() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.areaName.indexOf(value) !== -1
    },
    handleNodeClick(val) {
      this.basicData.searchOtherData.wellOrgId = val.id
      this.basicData.searchOtherData.wellAreaId = ''
      findSysAreaByCondition({ areaOrgId: this.basicData.searchOtherData.wellOrgId }).then((res) => {
        this.areaOption = res.data
        this.$refs.basePage.getList()
      })
    },
    handleAreaNodeClick(val) {
      this.basicData.searchOtherData.wellAreaId = val.id
      this.$refs.basePage.getList()
    },
    getType() {
      findSysProdOrgAll().then((response) => {
        this.orgOption = response.data
        this.$nextTick(() => {
          if (response.data && response.data.length > 0) {
            this.$refs.tree.setCurrentKey(response.data[0].id)
            this.basicData.searchOtherData.wellOrgId = response.data[0].id
            findSysAreaByCondition({ areaOrgId: this.basicData.searchOtherData.wellOrgId }).then((res) => {
              this.areaOption = res.data
              this.$refs.basePage.getList()
            })
          }
        })
      })
    },
    // 业务逻辑
    resetTemp() {
      this.temp = {
        id: undefined,
        wellOrgId: this.basicData.searchOtherData.wellOrgId
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addSysWell(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.temp)
          const tempData = {}
          tempData.id = this.temp.id
          tempData.wellCommonName = this.temp.wellCommonName
          tempData.wellAreaName = this.temp.wellAreaName
          tempData.wellOrgName = this.temp.wellOrgName
          tempData.wellProject = this.temp.wellProject
          tempData.displayOrder = this.temp.displayOrder
          updateSysWell(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    },
    handleDebantchCreate() {
      this.$confirm('此操作将批量新增, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addSysWells(this.wellArr).then(response => {
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success',
            duration: 2000
          })
          this.handleReset()
        })
      })
    }
  }
}
</script>

<style scoped>
  .warning{
    text-align: center;
    font-size: 20px;
  }
  .el-icon-info{
    font-size: 30px;
    color: orange;
  }
</style>
